<script setup lang="ts">
import { onMounted, ref, onUnmounted } from 'vue'
import { getUserInfo } from '@/api/user'
import { showToast } from 'vant'

const userInfo = ref<any>(null)
const currentPage = ref(0)
const startX = ref(0)

const moveX = ref(0)
const isDragging = ref(false)
const screenWidth = ref(0)
const pages = ref([
  { id: 1, image: '/images/20250424182336.png' },
  { id: 2, image: '/images/20250423191211.png' },
  { id: 3, image: '/images/qiannimadeb1i.png' }
])

const fetchUserInfo = async () => {
  try {
    const res = await getUserInfo()
    userInfo.value = res.data
  } catch (error: any) {
    showToast(error.message || '获取用户信息失败')
  }
}

const updateScreenWidth = () => {
  screenWidth.value = document.documentElement.clientWidth
}

const handleTouchStart = (e: TouchEvent) => {
  startX.value = e.touches[0].clientX
  isDragging.value = true
}

const handleTouchMove = (e: TouchEvent) => {
  if (!isDragging.value) return
  moveX.value = e.touches[0].clientX - startX.value
}

const handleTouchEnd = () => {
  isDragging.value = false
  const threshold = screenWidth.value * 0.3

  if (Math.abs(moveX.value) > threshold) {
    if (moveX.value > 0 && currentPage.value > 0) {
      currentPage.value--
    } else if (moveX.value < 0 && currentPage.value < pages.value.length - 1) {
      currentPage.value++
    }
  }
  moveX.value = 0
}

onMounted(() => {
  updateScreenWidth()
  window.addEventListener('resize', updateScreenWidth)
  // fetchUserInfo()
})

onUnmounted(() => {
  window.removeEventListener('resize', updateScreenWidth)
})


</script>

<template>
  <div class="jdl-home">
    <!-- 顶部导航栏 -->
    <header class="jdl-header">
      <img class="jdl-logo" src="https://img12.360buyimg.com/jdphoto/s50x50_jfs/t1/181917/13/34913/2462/646c1e7eFf7e2e2e2/2e2e2e2e.png" alt="京东物流LOGO" />
      <div class="jdl-header-icons">
        <span class="jdl-header-lang">简</span>
        <span class="jdl-header-user"><svg width="22" height="22" viewBox="0 0 24 24"><circle cx="12" cy="8" r="4" fill="#888"/><path d="M4 20c0-4 8-4 8-4s8 0 8 4" fill="#888"/></svg></span>
      </div>
    </header>

    <!-- 搜索框 -->
    <div class="jdl-search-bar">
      <input class="jdl-search-input" type="text" placeholder="请输入运单号或包裹号" />
      <button class="jdl-search-btn">
        <svg width="22" height="22" viewBox="0 0 24 24"><circle cx="11" cy="11" r="8" stroke="#fff" stroke-width="2" fill="none"/><path d="M21 21l-4.35-4.35" stroke="#fff" stroke-width="2" stroke-linecap="round"/></svg>
      </button>
    </div>

    <!-- 快捷功能入口 -->
    <div class="jdl-quick-entry">
      <div class="jdl-entry-item">
        <img src="https://img10.360buyimg.com/jdphoto/s48x48_jfs/t1/181917/13/34913/2462/646c1e7eFf7e2e2e2/2e2e2e2e.png" alt="运费&时效查询" />
        <div>运费&时效查询</div>
      </div>
      <div class="jdl-entry-item">
        <img src="https://img10.360buyimg.com/jdphoto/s48x48_jfs/t1/181917/13/34913/2462/646c1e7eFf7e2e2e2/2e2e2e2e.png" alt="网点查询" />
        <div>网点查询</div>
      </div>
      <div class="jdl-entry-item">
        <img src="https://img10.360buyimg.com/jdphoto/s48x48_jfs/t1/181917/13/34913/2462/646c1e7eFf7e2e2e2/2e2e2e2e.png" alt="配送范围" />
        <div>配送范围</div>
      </div>
      <div class="jdl-entry-item">
        <img src="https://img10.360buyimg.com/jdphoto/s48x48_jfs/t1/181917/13/34913/2462/646c1e7eFf7e2e2e2/2e2e2e2e.png" alt="我要寄件" />
        <div>我要寄件</div>
      </div>
    </div>

    <!-- 服务列表 -->
    <div class="jdl-section-title">面向丰富场景的物流服务</div>
    <div class="jdl-service-list">
      <div class="jdl-service-item">
        <img src="https://img10.360buyimg.com/jdphoto/s72x72_jfs/t1/181917/13/34913/2462/646c1e7eFf7e2e2e2/2e2e2e2e.png" alt="仓配服务" />
        <div class="jdl-service-info">
          <div class="jdl-service-title">仓配服务</div>
          <div class="jdl-service-desc">面向企业客户的综合仓配，一体化及可定制的仓配服务</div>
        </div>
      </div>
      <div class="jdl-service-item">
        <img src="https://img10.360buyimg.com/jdphoto/s72x72_jfs/t1/181917/13/34913/2462/646c1e7eFf7e2e2e2/2e2e2e2e.png" alt="快速快运服务" />
        <div class="jdl-service-info">
          <div class="jdl-service-title">快速快运服务</div>
          <div class="jdl-service-desc">面向企业及个人客户的定日达、时效快运，专业大件运输及配送服务</div>
        </div>
      </div>
      <div class="jdl-service-item">
        <img src="https://img10.360buyimg.com/jdphoto/s72x72_jfs/t1/181917/13/34913/2462/646c1e7eFf7e2e2e2/2e2e2e2e.png" alt="大件服务" />
        <div class="jdl-service-info">
          <div class="jdl-service-title">大件服务</div>
          <div class="jdl-service-desc">为大件商品提供仓储、运输、安装一体化服务</div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.jdl-home {
  background: #f7f7f8;
  min-height: 100vh;
  font-family: 'PingFang SC', 'Microsoft YaHei', Arial, sans-serif;
}
.jdl-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 56px;
  padding: 0 16px;
  background: #fff;
  border-bottom: 1px solid #eee;
}
.jdl-logo {
  height: 28px;
}
.jdl-header-icons {
  display: flex;
  align-items: center;
  gap: 16px;
}
.jdl-header-lang {
  font-size: 16px;
  color: #333;
  margin-right: 8px;
}
.jdl-header-user {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.jdl-search-bar {
  display: flex;
  align-items: center;
  margin: 16px 16px 0 16px;
  background: #e53935;
  border-radius: 24px;
  padding: 4px 8px;
}
.jdl-search-input {
  flex: 1;
  border: none;
  background: transparent;
  font-size: 16px;
  color: #fff;
  padding: 8px 0 8px 12px;
  outline: none;
  ::placeholder {
    color: #fff;
    opacity: 0.7;
  }
}
.jdl-search-btn {
  background: none;
  border: none;
  outline: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #e53935;
  cursor: pointer;
}
.jdl-quick-entry {
  display: flex;
  justify-content: space-around;
  background: #fff;
  margin: 16px 0 0 0;
  padding: 12px 0;
  border-bottom: 1px solid #eee;
}
.jdl-entry-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 13px;
  color: #333;
}
.jdl-entry-item img {
  width: 36px;
  height: 36px;
  margin-bottom: 4px;
}
.jdl-section-title {
  font-size: 15px;
  color: #222;
  font-weight: 500;
  margin: 20px 0 8px 16px;
}
.jdl-service-list {
  background: #fff;
  margin: 0 16px 16px 16px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.03);
  padding: 8px 0;
}
.jdl-service-item {
  display: flex;
  align-items: flex-start;
  padding: 12px 16px;
  border-bottom: 1px solid #f0f0f0;
}
.jdl-service-item:last-child {
  border-bottom: none;
}
.jdl-service-item img {
  width: 48px;
  height: 48px;
  margin-right: 12px;
}
.jdl-service-info {
  flex: 1;
}
.jdl-service-title {
  font-size: 15px;
  color: #222;
  font-weight: 500;
  margin-bottom: 4px;
}
.jdl-service-desc {
  font-size: 13px;
  color: #666;
}
</style> 